<template>
  <!-- 监管二级页面 -->
  <div class="app-container theme-bg-index">
    <header>
      <div class="center-img">
        <p>项目产值分析</p>
      </div>
    </header>
    <!-- 内容区 -->
    <section>
      <el-row style="margin-top:10px" :gutter="15">
        <el-col :span="12">
          <div class="bar">
            <div class="bar-img" />
            <h3 class="title center">
              <span class="all" @click="getProTypeAll">全部</span>
              <span>{{ proTitle }}</span>
              <span class="more" @click="goProject()">更多<i class="el-icon-arrow-right" /></span>
            </h3>
            <el-row class="cont">
              <el-col :span="8">
                <EchartsPie :legend="[...proLenged]" :data-list="ProjectTypedata" type="1" @setTitle="setTitle" />
              </el-col>
              <el-col :span="16">
                <ProjectTable height="280px" :list-data="prolistData" type="1" :list-header="TypelistHeader" />
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="bar">
            <div class="bar-img" />
            <h3 class="title center">
              <span>项目等级产值情况</span>
              <span class="more" @click="goProject()">更多<i class="el-icon-arrow-right" /></span>
            </h3>
            <el-row class="cont">
              <el-col :span="10">
                <EchartsOneBarLine :data-list="proGradeData" />
              </el-col>
              <el-col :span="14">
                <ProjectTable height="280px" :list-data="TypelistDataAll" type="2" :list-header="LevellistHeader" />
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col style="margin-top:10px" :span="12">
          <div class="bar">
            <div class="bar-img" />
            <h3 class="title center">
              <span>项目产值Top5</span>
              <PriceOrder class="left" :command.sync="command" :table-data.sync="valuePriceList" :pro-list.sync="proList" />
              <span class="more" @click="goProject(command === 'justice' ? '0' : '1','0')"> 更多 <i class="el-icon-arrow-right" /></span>
            </h3>
            <el-row class="cont">
              <el-col :span="10">
                <EcharsBarX grid-right="35%" height="280px" :pro-list="[...proList]" :value-price-list="[...valuePriceList]" />
              </el-col>
              <el-col :span="14">
                <ProjectTable height="280px" :list-data="proValueData" type="4" :list-header="proValueListHeader" />
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col style="margin-top:10px" :span="12">
          <div class="bar">
            <div class="bar-img" />
            <h3 class="title center">
              <span class="all" @click="getLandTypeAll">全部</span>
              <span>{{ landTitle }}</span>
              <span class="more" @click="goProject()">更多<i class="el-icon-arrow-right" /></span>
            </h3>
            <el-row class="cont">
              <el-col :span="8">
                <EchartsPie :legend="[...landLenged]" :data-list="LandTypedata" type="3" @setTitle="setTitle" />
              </el-col>
              <el-col :span="16">
                <ProjectTable height="280px" :list-data="TypelistData" type="3" :list-header="LandlistHeader" />
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </section>
  </div>
</template>

<script>

import PriceOrder from '@/components/EchartsComponents/PriceOrder'
import { selectProjectSecondPage } from '@/api/home'
import EchartsOneBarLine from '@/views/statisticalAnalysis/ProjectOutputValue/components/EchartsOneBarLine'
import EcharsBarX from '@/components/EchartsComponents/EcharsBarX'
import EchartsPie from '@/views/statisticalAnalysis/ProjectOutputValue/components/EchartsPie'
import ProjectTable from '@/views/statisticalAnalysis/ProjectOutputValue/components/ProjectTable'
export default {
  name: 'Home',
  components: {
    EchartsOneBarLine,
    EcharsBarX,
    EchartsPie,
    ProjectTable,
    PriceOrder
  },
  data() {
    return {
      command: 'justice',
      date: '',
      // 切换全部的表格数据
      TypelistDataAll: [],
      // 项目类型产值
      proTitle: '项目类型产值情况',
      proLenged: [],
      ProjectTypedata: [
        { totalMoney: 0, ptTypeName: '无', countCountyPro: 0, proportion: 0 }
      ], // 图形数据
      prolistData: [], // 表格数据
      TypelistHeader: [ // 表格表头
        { name: '项目名称' },
        { name: '项目类型' },
        { name: '总合同额(万元)' }
      ],
      // 项目等级产值
      proGradeData: [], // 图形数据
      // 表格表头
      LevellistHeader: [{ name: '项目名称' }, { name: '项目等级' }, { name: '总合同额(万元)' }],
      // 项目产值排名
      proValueData: [], // 表格数据
      valuePriceList: [],
      proList: [],
      proValueListHeader: [ // 表格表头
        { name: '项目编号' },
        { name: '项目排名' },
        { name: '总合同额(万元)' }
      ],
      proValuelistData: [], // 表格数据
      // 地貌类型项目
      landLenged: [],
      LandTypedata: [{ totalMoney: 0, rtTypeName: '无', countCountyPro: 0, proportion: 0 }], // 图形数据
      LandlistHeader: [ // 表格表头
        { name: '项目名称' },
        { name: '地貌类型' },
        { name: '总合同额(万元)' }
      ],
      landTitle: '地貌类型项目情况',
      // 表格数据
      TypelistData: []
    }
  },
  mounted() {
    this.geiList()
  },
  methods: {
    async geiList() {
      const { data: {
        projectOutputLeftDowm,
        projectOutputLeftUp,
        projectOutputRightDowm,
        projectOutputRightUp,
        projectOutputs
      }} = await selectProjectSecondPage()
      // 项目类型
      this.proLenged = projectOutputLeftUp.map(item => item.ptTypeName)
      this.ProjectTypedata = projectOutputLeftUp
      this.prolistData = projectOutputs
      // 项目等级
      this.proGradeData = projectOutputRightUp
      // 项目产值Top 10
      this.proValueData = [...projectOutputLeftDowm]
      projectOutputLeftDowm.splice(0, 5).forEach(item => {
        this.valuePriceList.push(item.totalMoney)
        this.proList.push(item.pNum)
      })
      // 地貌类型
      this.landLenged = projectOutputRightDowm.map(item => item.rtTypeName)
      this.LandTypedata = projectOutputRightDowm
      // 表格数据
      this.TypelistData = projectOutputs
      this.TypelistDataAll = projectOutputs
    },
    goProject(sequenceWay, sequenceCondition) {
      this.$router.push({
        name: 'statisticsList-project',
        params: {
          sequenceWay,
          sequenceCondition
        }
      })
    },
    getLandTypeAll() {
      this.landTitle = '地貌类型项目情况'
      this.TypelistData = this.TypelistDataAll
    },
    getProTypeAll() {
      this.proTitle = '项目类型产值情况'
      this.prolistData = this.TypelistDataAll
    },
    setTitle(title) {
      if (this.landLenged.includes(title)) {
        this.landTitle = title
        this.TypelistData = this.TypelistDataAll.filter(item => item.rtTypeName === title)
      } else if (this.proLenged.includes(title)) {
        this.proTitle = title
        this.prolistData = this.TypelistDataAll.filter(item => item.ptTypeName === title)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  * {
    margin: 0;
    padding: 0;
  }
</style>
